<datatable-demos></datatable-demos>

<div class="content-section introduction">
    <div>
        <span class="feature-title">DataTable - Scroll</span>
        <span>Data scrolling with fixed header is available horizontally, vertically or both. ScrollHeight and ScrollWidth values can either
        be fixed pixels or percentages. Virtual Scrolling mode is available to deal with large datasets by loading data on demand during scrolling. 
        In additon certain columns and rows can be fixed as well. </span>
    </div>
</div>

<div class="content-section implementation">
    <p-dataTable [value]="cars" scrollable="true" scrollHeight="200px">
        <p-header>Vertical</p-header>
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
        <p-column field="color" header="Color"></p-column>
    </p-dataTable>
    
    <p-dataTable [value]="carsLarge" scrollable="true" scrollHeight="200px" [rows]="20" virtualScroll="virtualScroll" [style]="{'margin-top':'30px'}" 
        [lazy]="true" [totalRecords]="totalRecords" (onLazyLoad)="loadCarsLazy($event)">
        <p-header>Virtual Scrolling - 250K Rows</p-header>
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
        <p-column field="color" header="Color"></p-column>
    </p-dataTable>

    <p-dataTable [value]="cars" scrollable="true" scrollHeight="200px" scrollWidth="600px" [style]="{'margin-top':'30px'}">
        <p-header>Vertical and Horizontal</p-header>
        <p-column field="vin" header="Vin" [style]="{'width':'250px'}"></p-column>
        <p-column field="year" header="Year" [style]="{'width':'250px'}"></p-column>
        <p-column field="brand" header="Brand" [style]="{'width':'250px'}"></p-column>
        <p-column field="color" header="Color" [style]="{'width':'250px'}"></p-column>
    </p-dataTable>
    
    <p-dataTable [value]="cars" [frozenValue]="frozenCars" scrollable="true" scrollHeight="200px" [style]="{'margin-top':'30px'}">
        <p-header>Frozen Rows</p-header>
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
        <p-column field="color" header="Color"></p-column>
    </p-dataTable>
    
    <p-dataTable [value]="cars" scrollable="true" scrollHeight="200px" frozenWidth="200px" unfrozenWidth="600px" [style]="{'margin-top':'30px'}">
        <p-header>Frozen Columns</p-header>
        <p-column field="vin" header="Vin" [style]="{'width':'200px'}" frozen="true"></p-column>
        <p-column field="year" header="Year" [style]="{'width':'250px'}"></p-column>
        <p-column field="brand" header="Brand" [style]="{'width':'250px'}"></p-column>
        <p-column field="color" header="Color" [style]="{'width':'250px'}"></p-column>
        <p-column field="year" header="Year" [style]="{'width':'250px'}"></p-column>
        <p-column field="brand" header="Brand" [style]="{'width':'250px'}"></p-column>
        <p-column field="color" header="Color" [style]="{'width':'250px'}"></p-column>
    </p-dataTable>
    
    <p-dataTable [value]="cars" [frozenValue]="frozenCars" scrollable="true" scrollHeight="200px" frozenWidth="200px" unfrozenWidth="600px" [style]="{'margin-top':'30px'}">
        <p-header>Frozen Rows and Columns</p-header>
        <p-column field="vin" header="Vin" [style]="{'width':'200px'}" frozen="true"></p-column>
        <p-column field="year" header="Year" [style]="{'width':'250px'}"></p-column>
        <p-column field="brand" header="Brand" [style]="{'width':'250px'}"></p-column>
        <p-column field="color" header="Color" [style]="{'width':'250px'}"></p-column>
        <p-column field="year" header="Year" [style]="{'width':'250px'}"></p-column>
        <p-column field="brand" header="Brand" [style]="{'width':'250px'}"></p-column>
        <p-column field="color" header="Color" [style]="{'width':'250px'}"></p-column>
    </p-dataTable>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="datatablescrolldemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatablescrolldemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class DataTableScrollDemo implements OnInit &#123;

    cars: Car[];
    
    frozenCars: Car[];
    
    carsLarge: Car[];
    
    totalRecords: number;

    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsMedium().then(cars => this.cars = cars);
        this.frozenCars = [
            &#123;"brand": "BMW", "year": 2013, "color": "Grey", "vin": "fh2uf23"&#125;,
            &#123;"brand": "Chevrolet", "year": 2011, "color": "Black", "vin": "4525g23"&#125;
        ];
        
        this.totalRecords = 250000;
    &#125;
    
    loadCarsLazy(event: LazyLoadEvent) &#123;
        //for demo purposes keep loading the same dataset 
        //in a real production application, this data should come from server by building the query with LazyLoadEvent options   
        
        setTimeout(() => &#123;
            this.carsLarge = [
                &#123;"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"&#125;,
                &#123;"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"&#125;,
                &#123;"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"&#125;,
                &#123;"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"&#125;,
                &#123;"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"&#125;,
                &#123;"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"&#125;,
                &#123;"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"&#125;,
                &#123;"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"&#125;,
                &#123;"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"&#125;,
                &#123;"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"&#125;,
                &#123;"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"&#125;,
                &#123;"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"&#125;,
                &#123;"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"&#125;,
                &#123;"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"&#125;,
                &#123;"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"&#125;,
                &#123;"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"&#125;,
                &#123;"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"&#125;,
                &#123;"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"&#125;,
                &#123;"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"&#125;,
                &#123;"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"&#125;,
                &#123;"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"&#125;,
                &#123;"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"&#125;,
                &#123;"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"&#125;,
                &#123;"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"&#125;,
                &#123;"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"&#125;,
                &#123;"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"&#125;,
                &#123;"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"&#125;,
                &#123;"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"&#125;,
                &#123;"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"&#125;,
                &#123;"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"&#125;,
                &#123;"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"&#125;,
                &#123;"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"&#125;,
                &#123;"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"&#125;,
                &#123;"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"&#125;,
                &#123;"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"&#125;,
                &#123;"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"&#125;,
                &#123;"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"&#125;,
                &#123;"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"&#125;,
                &#123;"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"&#125;,
                &#123;"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"&#125;
            ];
        &#125;, 25);
        
    &#125;
&#125;
</code>
</pre>
        </p-tabPanel>

        <p-tabPanel header="datatablescrolldemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatablescrolldemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-dataTable [value]="cars" scrollable="true" scrollHeight="200px"&gt;
    &lt;p-header&gt;Vertical&lt;/p-header&gt;
    &lt;p-column field="vin" header="Vin"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color"&gt;&lt;/p-column&gt;
&lt;/p-dataTable&gt;

&lt;p-dataTable [value]="carsLarge" scrollable="true" scrollHeight="200px" [rows]="20" virtualScroll="virtualScroll" [style]="&#123;'margin-top':'30px'&#125;" 
    [lazy]="true" [totalRecords]="totalRecords" (onLazyLoad)="loadCarsLazy($event)"&gt;
    &lt;p-header&gt;Virtual Scrolling - 250K Rows&lt;/p-header&gt;
    &lt;p-column field="vin" header="Vin"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color"&gt;&lt;/p-column&gt;
&lt;/p-dataTable&gt;

&lt;p-dataTable [value]="cars" scrollable="true"  scrollHeight="200px" scrollWidth="600px" [style]="&#123;'margin-top':'30px'&#125;"&gt;
    &lt;p-header&gt;Vertical and Horizontal&lt;/p-header&gt;
    &lt;p-column field="vin" header="Vin" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
&lt;/p-dataTable&gt;

&lt;p-dataTable [value]="cars" [frozenValue]="frozenCars" scrollable="true" scrollHeight="200px" [style]="&#123;'margin-top':'30px'&#125;"&gt;
    &lt;p-header&gt;Frozen Rows&lt;/p-header&gt;
    &lt;p-column field="vin" header="Vin"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color"&gt;&lt;/p-column&gt;
&lt;/p-dataTable&gt;

&lt;p-dataTable [value]="cars" scrollable="true" scrollHeight="200px" frozenWidth="200px" unfrozenWidth="600px" [style]="&#123;'margin-top':'30px'&#125;"&gt;
    &lt;p-header&gt;Frozen Columns&lt;/p-header&gt;
    &lt;p-column field="vin" header="Vin" [style]="&#123;'width':'250px'&#125;" frozen="true"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
&lt;/p-dataTable&gt;

&lt;p-dataTable [value]="cars" [frozenValue]="frozenCars" scrollable="true" scrollHeight="200px" frozenWidth="200px" unfrozenWidth="600px" [style]="&#123;'margin-top':'30px'&#125;"&gt;
    &lt;p-header&gt;Frozen Rows and Columns&lt;/p-header&gt;
    &lt;p-column field="vin" header="Vin" [style]="&#123;'width':'250px'&#125;" frozen="true"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color" [style]="&#123;'width':'250px'&#125;"&gt;&lt;/p-column&gt;
&lt;/p-dataTable&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>